<script>
import nullCont from '@/views/components/nullCont/nullCont'
import proForm from './ProForm'
import proTable from './ProTable'
import { LoadingDialog } from '_com/LoadingDialog'
import { mapGetters } from 'vuex'
export default {
    name: 'ProFormTable',
    props: {
        formConfig: {
            type: Object
        },
        tableConfig: {
            type: Object
        },
        pageConfig: {
            type: Object
        },
        title: {
            type: String
        },
        checkedboxText: {
            type: String
        },
        tabsConfig: {
            type: Object,
            default: () => ({})
        },
        showGrid: {
            type: Boolean,
            default: false
        },
        loadingText: {
            type: String,
            default: '导出'
        }
    },
    components: {
        LoadingDialog: LoadingDialog,
        nullCont,
        proForm,
        proTable
    },
    render () {
        let { tabs } = this.tabsConfig
        this.tabName = this.$route.query.type || 'own'
        return (
            <div class="pro-form-table" ref="proFormTable">
                { (tabs && tabs.length && this.tabsConfig) || this.showGrid
                    ? <div class="pro-goods-tab">
                        {
                            tabs && tabs.length && this.tabsConfig
                                ? <el-tabs
                                    v-model={this.tabName}
                                    { ...{ on: this.tabsConfig.event } }
                                >
                                    {
                                        tabs.map(item => (
                                            <el-tab-pane key={item.name} name={item.type}>
                                                <span slot="label" style={{ padding: '0 20px' }}>{item.name}</span>
                                            </el-tab-pane>
                                        ))
                                    }
                                </el-tabs> : null
                        }
                        {
                            this.showGrid
                                ? <div class="pro-goods-grid-box">
                                    <span type="text" class={!this.isGrid ? 'is-active pro-goods-grid-btn' : 'pro-goods-grid-btn'} on-click={() => { this.isGrid = false }}>列表视图</span>
                                    <span type="text" class={this.isGrid ? 'is-active pro-goods-grid-btn' : 'pro-goods-grid-btn'} on-click={() => { this.isGrid = true }}>网格视图</span>
                                </div>
                                : null
                        }
                    </div> : null
                }
                {this.title ? <div class="title">
                    <h3 domPropsInnerHTML={this.title}></h3>
                </div> : null}
                <pro-form ref="proForm" formConfig={this.formConfig} on-search={this.searchForm} on-reset={this.resetForm} isCheck={this.isCheck}></pro-form>
                <pro-table style={{ ...this.tableConfig.table.style }} ref="proTable" tableConfig={this.tableConfig} pageConfig={this.pageConfig} checkedbox-text={this.checkedboxText} showGrid={this.showGrid}></pro-table>
                {<LoadingDialog identifyKey={this.identifyKey} loadingText={this.loadingText} ref="exportData"></LoadingDialog>}
            </div>
        )
    },
    computed: {
        ...mapGetters('user', [
            'userInfo'
        ]),
        directives () {
            return [{ name: 'loading', value: this.tableConfig.loading }]
        },
        isCheck () {
            return this.tableConfig.checkAll || !!(this.tableConfig.table.selectedRow && this.tableConfig.table.selectedRow.length)
        }
    },
    watch: {
    },
    data () {
        return {
            identifyKey: '',
            multipleSelection: [],
            optionsCurrentPage: {},
            optionsSearchKey: {},
            isGrid: false,
            selectPages: {
                current: 1,
                pageSize: 50,
                total: 0
            },
            filterOptions: {
                brandId: [],
                supplierId: [],
                ...this.formConfig.form
            },
            tabName: 'own',
            statusType: this.$parent.statusType,
            isIndeterminate: false
        }
    },
    methods: {
        resetForm () {
            this.initFormTable()
        },
        initFormTable () {
            this.checkAll = false
            this.tableConfig.checkAll = false
            this.tableConfig.loading = true
            this.checkedItems = []
            this.$refs.proTable.$refs.proTable && this.$refs.proTable.$refs.proTable.clearSort()
            this.$parent.tableConfig.tableMethods.toggleSelection && this.$parent.tableConfig.tableMethods.toggleSelection()
            this.pageConfig.attr['current-page'] = 1
            this.pageConfig.attr['page-size'] = 20
            this.tableConfig.table.unSelectedRow = []
            this.$parent.getTableData && this.$parent.getTableData()
        },
        searchForm () {
            this.initFormTable()
        },
        remoteMethod (val, formItem) {
            this.optionsSearchKey[formItem.prop] = val
            this.optionsCurrentPage[formItem.prop] = 1
            this.getOptions(formItem.innerEl.remotePagination, { categoryName: val, currentPage: 1 }).then(res => {
                if (res.success) {
                    formItem.innerEl.options = (res.result.length && res.result) || []
                }
            })
        },
        // 网格列表全选
        handleCheckAllChange (val) {
            this.checkedItems = val ? this.tableConfig.table.data.map(el => {
                let id = el[this.tableConfig.table['selection-key']] || el.id
                return id
            }) : []
            this.isIndeterminate = false
            this.checkAll = val
            this.tableConfig.checkAll = val
            this.toggleAllSelection()
        },
        // 网格列表多选
        handlecheckedItemsChange (value) {
            if (this.statusType === 'offline') {
                let selectArr = value
                this.selectArrHas = this.selectArrHasFn(selectArr)
            }
            console.log(value, 'handlecheckedItemsChange')
            let checkedCount = value.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableConfig.table.data.length
            this.checkedItems = value
            this.$emit('selection-change', value)
            this.checkAll = false
        },
        turnToPage (route) {
            let { name, params, query, meta } = {}
            if (typeof route === 'string') name = route
            else {
                name = route.name
                params = route.params
                query = route.query
                meta = route.meta
            }
            if (name.indexOf('isTurnByHref_') > -1) {
                let { href } = this.$router.resolve({ name: name.split('_')[1], query: query })
                window.open(href, '_blank')
                return
            }
            this.$router.push({
                name,
                params,
                query,
                meta
            })
        },
        // 导出
        export (identifyKey, call) {
            this.identifyKey = identifyKey
            this.$nextTick(() => {
                this.$refs.exportData.start(call)
            })
        }
    },
    created () {
        for (let item in this.$parent.tableConfig.tableMethods) {
            this.$parent.tableConfig.tableMethods[item] = this.$parent.tableConfig.tableMethods[item].bind(this)
        }
    },
    mounted () {
    }
}
</script>
<style lang="less" scoped>
.pro-form-table {
    background-color: @white;
    padding: 30px 32px 20px 32px;
    .title {
        position: relative;
        margin-bottom: 16px;
        &::before {
            content: "";
            width: 3px;
            height: 12px;
            background-color: #f8711a;
            position: absolute;
            top: 2px;
        }
        h3 {
            font-size: 14px;
            color: #333;
            margin-left: 14px;
        }
    }
    .pro-form,.pro-table {
        padding: 0;
    }
    .pro-form {
        margin-bottom: 30px;
    }
}

</style>
